我的JQ／JS又不強，為了達到效果只好花工多時間去找適合的套件來使用
能在網路上找到適合的工具再加以修改，也是一門學問來著！
（如上一篇分享過...搜尋方式要適合、關鍵字要下對、沒事要多在各社群挖寶）

這幾天在做Lightbox這功能效果，心想，哎呀～這沒啥！
見怪不怪...網路套件多的事嘛～～～
結果是遇見魔鬼藏在細節裡

我要的效果如下：

• 支援Video
• 要符合RWD（支援手機）
• POPUP時要全屏無捲軸
• 滑入滑出、彈入彈出的lightbox效果

就為了這幾項...尤其是前二項！
為了這應付這魔鬼級的Lightbox我整整花了二天！二天！！！！！！！
（後面日子沒有假日了 ）

這二天我利用codepen搜尋效果
也在google搜尋查找分享文
然後做 測試 > 翻找 > 測試 > 修改 > 驗證 > 翻找 > 修改 > 測試....
在網路上看到但又不符合我的需求的問題
大部份是捲軸、RWD問題！

後來針對「響應式」「lightbox」「iframe」
的關鍵字，總於找到我需要的效果，再加以修改已寫好的效果
就可以組合完成了！

分享這套件：
jQuery套件：「fancyBox」
中文介紹 https://salongweb.com/fancybox3.html
英文官網 https://fancyapps.com/fancybox/3/

有興趣的人去看看！
也記得多點耐心看文件～
即使下載套件，它裡面也還是有一頁HTML，
一步一步細細說明套用方法。

這幾天實在傷了太多眼了！！！！
結束這回合的練習...下回也要來玩玩Pug了！
之前朋友推我試，但我無法適應沒有頭沒有尾的HTML...
現在是一篇HTML落落長，如果遇到測試要加個DIV都要找到眼花花
還有真心反省...JS/JQ 還是基礎功練好比較實在

還有對Pug好奇的人可以先看看這一篇文：
「如果你是常切版的前端工程師，你一定要知道pug!」